<template>
    <el-card>
        <template #header>
            <span>菜单管理</span>
        </template>
        <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        <el-table :data="menuData">
            <el-table-column label="ID" prop="id" align="center"></el-table-column>
            <el-table-column label="菜单名称" prop="label" align="center"></el-table-column>
            <el-table-column label="菜单图标" prop="icon" align="center"></el-table-column>
            <el-table-column label="菜单路径" prop="path" align="center"></el-table-column>
            <el-table-column label="上级菜单" prop="parent" align="center"></el-table-column>
            <el-table-column label="操作" align="center" justify="middle">
                <template #default="{ row }">
                    <el-button type="warning" size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDelete(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-row align="middle" justify="center">
            <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="pageSize"
                v-model:current-page="page" @current-change="getData" />
        </el-row>
        <el-dialog v-model="dialogVisible" title="新增菜单" width="500">
            <el-form label-width="80px" :model="addForm" :rules="rules" ref="formIns">
                <el-form-item label="菜单名称" prop="label">
                    <el-input v-model="addForm.label" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon">
                    <el-select v-model="addForm.icon" placeholder="选择菜单图标" clearable>
                        <el-option v-for="item in iconArr" :key="item" :label="item" :value="item" >
                            <component :is="item" style="width: 12px;height: 12px;"/>{{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单路径" prop="path">
                    <el-input v-model="addForm.path" clearable></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parent">
                    <el-input v-model="addForm.parent" clearable></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible2" title="更新菜单" width="500">
            <el-form label-width="80px" :model="editForm" :rules="rules" ref="formIns">
                <el-form-item label="菜单名称" prop="label">
                    <el-input v-model="editForm.label" clearable></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon" clearable>
                    <el-select v-model="editForm.icon" placeholder="选择菜单图标" clearable>
                        <el-option v-for="item in iconArr" :key="item" :label="item" :value="item" >
                            <component :is="item" style="width: 12px;height: 12px;"/>{{ item }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单路径" prop="path">
                    <el-input v-model="editForm.path" clearable></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="parent">
                    <el-input v-model="editForm.parent" clearable></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit2">提交</el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getMenu, addMenu, delMenu, edtMenu } from "@/api/api";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
//查询
const iconArr = Object.keys(ElementPlusIconsVue);
const menuData = ref<MenuData[]>([]);
const pageSize = ref(5);
const total = ref(0);
const page = ref(1);
const getData = async () => {
    const res = await getMenu({
        page: page.value,
        limit: pageSize.value
    });
    menuData.value = res.data.data;
    total.value = res.data.total;
}
onMounted(() => {
    getData();
})
//新增
const dialogVisible = ref(false);
const addForm = reactive<MenuForm>({
    label: "",
    icon: "",
    path: "",
    parent: "",
})
const rules: FormRules = {
    label: { required: true, message: "请输入菜单名称", trigger: "blur" },
    icon: { required: true, message: "请选择菜单图标", trigger: "blur" },
    path: { required: true, message: "请输入菜单路径", trigger: "blur" },
    parent: { required: true, message: "请输入上级菜单", trigger: "blur" },
}
const formIns = ref<FormInstance>();
const handleSubmit = () => {
    formIns.value?.validate(async (v) => {
        if (v) {
            const res = await addMenu(addForm);
            if (res.data.code === 200) {
                ElMessage.success("新增成功");
                dialogVisible.value = false;
                formIns.value?.resetFields();
                getData();
            } else {
                ElMessage.error(res.data.msg);
            }
        }
    })
}
//删除
const handleDelete = async (id: number) => {
    try {
        await ElMessageBox.confirm(
            '确认删除当前菜单吗?确认继续',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        const res = await delMenu(id);
        if (res.data.code === 200) {
            ElMessage.success("删除成功");
            getData();
        } else {
            ElMessage.error("删除失败");
        }
    } catch (e) {
        ElMessage.info("取消删除")
    }
}
//编辑
const dialogVisible2 = ref(false);
const editForm = ref<MenuForm>({
    label: "",
    icon: "",
    path: "",
    parent: "",
});
const formIns2 = ref<FormInstance>();
let editid: number;
const handleEdit = (body: MenuData) => {
    dialogVisible2.value = true;
    editForm.value = body;
    editid = body.id;
}
const handleSubmit2 = async () => {
    dialogVisible2.value = false;
    const res = await edtMenu(editid, editForm.value);
    if (res.data.code === 200) {
        ElMessage.success("更新成功");
        getData();
    } else {
        ElMessage.error(res.data.msg);
    }
}
</script>
<style scoped>
.el-row {
    height: 60px;
}
</style>